<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: #ccc;
      }

      .menu {
        width: 100px;
        height: 500px;
        background-color: green;
        transition: width 0.5s ease;
      }

      .menu.collapse {
        width: 50px;
      }

      .header {
        width: 400px;
        height: 500px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script>
      const Hello = {
        template: `
          <div>
            <p>Hello</p>
            <button @click="$emit('change')">去修改World组件的msg数据</button>
          </div>
        `,
      };

      const World = {
        props: ["message"],
        template: `
          <div>
            <p>World</p>
            <p>MSG: {{ message }}</p>
          </div>
        `,
      };

      const Menu = {
        props: ["collapsed"],
        template: `
          <div class="menu" :class="{ collapse: collapsed }">
            <button @click="$emit('set-collapsed', !collapsed)">切换</button>  
          </div>
        `,
      };

      const Header = {
        props: ["collapsed"],
        template: `
          <div class="header">
            <button @click="$emit('set-collapsed', !collapsed)">
              {{ collapsed ? '展开' : '收起' }}
            </button>  
          </div>
        `,
      };

      const App = {
        data() {
          return {
            msg: "123",
            collapsed: false, // 用于表示当前是否收起
          };
        },
        template: `
          <div>
            <Hello @change="msg = '456'" />

            <World :message="msg" />
            <hr />

            <div class="box">
              <Menu :collapsed="collapsed" @set-collapsed="collapsed = $event" />

              <Header :collapsed="collapsed" @set-collapsed="collapsed = $event" />
            </div>
          </div>
        `,
        components: {
          Hello,
          World,
          Menu,
          Header,
        },
      };

      const app = Vue.createApp(App);

      app.mount("#app");
    </script>
  </body>
</html>
